<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>

</head>
<body>

    <div id="app">
        <h1 id="sp">{{msg}}</h1>

        <input type="button" value="修改数据" @click="changeData">

        <input type="text" v-model="msg">
        <!--
            vue生命周期分为三个阶段:
                1.初始化阶段
                     beforeCreate(){//1.第一个执行生命周期函数,注意: 在这个函数执行的时候vue实例仅仅完成内部事件和使用生命周期方法初始化
                        console.log("beforeCreate: "+this.msg);
                    },
                    created(){ //2.第二个执行生命周期函数,注意: 在这个函数执行的时候vue实例已经完成自定义data、methods、computed等属性初始化以及语法校验
                        console.log(" created: "+this.msg);
                    },
                    beforeMount(){ //3.第三个执行的生命周期函数  注意:在这个函数执行的时候vue实例仅仅是将el属性指向的html编译成vue模板,此时并没有完成模板内容赋值
                        console.log("beforeMount: "+document.getElementById("sp").innerText);
                    },
                    mounted(){  //4.第四个执行的生命周期函数     注意: 在这个函数执行的时候vue实例会将data数据渲染到编译的模板中并形成虚拟dom,替换el指向dom
                        console.log("mounted: "+document.getElementById("sp").innerText);
                    }
                2.运行阶段
                    beforeUpdate(){//5.第五个执行的生命周期函数  注意: 在这个函数执行的时候,vue实例中data数据发生改变,但是页面中数据还是原始数据
                        console.log("beforeUpdate: "+this.msg);//data变化为更新的内容
                        console.log("beforeUpdate: "+document.getElementById("sp").innerText); //页面原始内容
                    },
                    updated(){ //6.第六个执行的生命周期函数      注意: 在这个函数执行的时候,vue实例中data数据和页面中数据已经一致了
                        console.log("updated: "+this.msg);//data 变化为更新内容
                        console.log("updated: "+document.getElementById("sp").innerText); //页面也更新了
                    }
                3.销毁阶段
                    beforeDestroy(){ //7.第七个执行的生命周期方法  注意: 在这个函数执行的时候 vue实例仅仅是开始销毁 data methods ....
                        console.log("beforeDestroy: "+this.msg);
                    },
                    destroyed(){     //8.第八个执行的生命周期方法  注意: 在这个函数执行的时候 vue实例上的所有数 events child component(子组件) listener监听机制
                        console.log("destroyed: "+ this.msg);
                    }
        -->

    </div>
</body>
</html>
<script src="../../../../Downloads/vue-2021笔记代码资料/代码/vue_day2/src/main/webapps/vue/js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"vue 生命周期",//xxxx,
            users:[],
        },
        methods:{
            changeData(){
                this.msg='vue 生命周期函数讲解' +Math.random();
            }
        },
        computed:{},
        beforeCreate(){//1.第一个执行生命周期函数,注意: 在这个函数执行的时候vue实例仅仅完成内部事件和使用生命周期方法初始化
            console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.第二个执行生命周期函数,注意: 在这个函数执行的时候vue实例已经完成自定义data、methods、computed等属性初始化以及语法校验
            console.log(" created: "+this.msg);
            //axios.get("/user/findAll").then(res=>{this.users = res.data});   //推荐
        },
        beforeMount(){ //3.第三个执行的生命周期函数  注意:在这个函数执行的时候vue实例仅仅是将el属性指向的html编译成vue模板,此时并没有完成模板内容赋值
            console.log("beforeMount: "+document.getElementById("sp").innerText);
            //axios.get("/user/findAll").then(res=>{this.users = res.data});
        },
        mounted(){  //4.第四个执行的生命周期函数     注意: 在这个函数执行的时候vue实例会将data数据渲染到编译的模板中并形成虚拟dom,替换el指向dom
            console.log("mounted: "+document.getElementById("sp").innerText);  //users  table  // users  table刷新
            //axios.get("/user/findAll").then(res=>{this.users = res.data});
        },
        beforeUpdate(){//5.第五个执行的生命周期函数  注意: 在这个函数执行的时候,vue实例中data数据发生改变,但是页面中数据还是原始数据
            console.log("beforeUpdate: "+this.msg);//data变化为更新的内容
            console.log("beforeUpdate: "+document.getElementById("sp").innerText); //页面原始内容
        },
        updated(){ //6.第六个执行的生命周期函数      注意: 在这个函数执行的时候,vue实例中data数据和页面中数据已经一致了
            console.log("updated: "+this.msg);//data 变化为更新内容
            console.log("updated: "+document.getElementById("sp").innerText); //页面也更新了
        },
        beforeDestroy(){ //7.第七个执行的生命周期方法  注意: 在这个函数执行的时候 vue实例仅仅是开始销毁 data methods ....
            console.log("beforeDestroy: "+this.msg);
        },
        destroyed(){     //8.第八个执行的生命周期方法  注意: 在这个函数执行的时候 vue实例上的所有数 events child component(子组件) listener监听机制
            console.log("destroyed: "+ this.msg);
        }
    })
</script>
